<script>
import Api from '@/api/index.js'
import loadingSVG from './images/loading.svg'
const originSize = 15;
export default {
  name: "manager",
  components: {
  },
  data() {
    return {
      loadingSVG: `
        <circle class="path" cx="25" cy="25" r="10" fill="none">
        </circle>
      `,
      // 正在上传
      isUploading: false,
      // 正在导出
      isExporting: false,
      originSize: originSize,
      formData: {
        wtfl: '',
        ssxq: '',
        ssgs: '',
        page: 1,
        handleUpdateTime: dayjs().format('YYYY-MM-DD'),
        updateTime: dayjs().format('YYYY-MM-DD'),
        size: originSize
      },
      totalDataLength: 0,
      tableData_s: "",
      tableData: [],
      dialogVisible: false,
      dialogVisibleDetail: false,
      // 当前选中的一行数据
      currentRow: {
        sceneName: '热源监测',
        featureFac: '设备监测',
        indicator: '锅炉内温度',
        warningInfo: '数值过高',
        remarks: '热源监测锅炉内温度阈值设置',
        unit: '℃',
        minTem: 80,
        maxTem: 100,
      },
      dialogVisibleMuti: false,
      // 还原系统的设置
      dialogVisibleResetSetting: false,
      selectionArr: []
    };
  },
  computed: {
    mainStyle() {
      let maxHeight = (window.innerHeight - 310) / window.dpr;
      return {
        height: maxHeight + 'px'
      }
    },
  },
  watch: {},
  mounted() {
    this.doSearch()
  },
  beforeUnmount() { },
  methods: {
    //  查询
    doSearch() {
      this.tableData = [{
        sceneName: '热源监测',
        featureFac: '设备监测',
        indicator: '锅炉内温度',
        warningInfo: '数值过高',
        remarks: '热源监测锅炉内温度阈值设置',
        unit: '℃',
        minTem: 80,
        maxTem: 100,
      }, {
        sceneName: '热源监测',
        featureFac: '温度压力',
        indicator: '出厂温度',
        warningInfo: '数值过高',
        remarks: '热源监测出厂温度阈值设置',
        unit: '℃',
        minTem: 80,
        maxTem: 100,
      }, {
        sceneName: '换热站监测',
        featureFac: '一次管网',
        indicator: '一供温度',
        warningInfo: '数值过高',
        remarks: '换热站一次管网供水温度阈值设置',
        unit: '℃',
        minTem: 80,
        maxTem: 100,
      }, {
        sceneName: '换热站监测',
        featureFac: '二次管网',
        indicator: '二供温度',
        warningInfo: '数值过高',
        remarks: '换热站二次管网供水温度阈值设置',
        unit: '℃',
        minTem: 80,
        maxTem: 100,
      }]
      return
      Api.getComplainListData({
        page: this.formData.page,
        size: this.formData.size,
        ssgs: this.formData.ssgs,
        ssxq: this.formData.ssxq,
        wtfl: this.formData.wtfl,
        updateTime: this.formData.updateTime,
      }).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            v.bjsx = dayjs(v.bjsx).format('YYYY/MM/DD HH:mm:ss');
            v.pdsj = dayjs(v.pdsj).format('YYYY/MM/DD HH:mm:ss');
          })
          this.tableData = res.data;
          this.totalDataLength = res.count;
        } else {
          this.tableData = [];
          this.totalDataLength = 0;
        }
      })
    },
    //  重置
    reset() {
      this.formData.ssgs = '';
      this.formData.ssxq = '';
      this.formData.wtfl = '';
      this.formData.page = 1;
      this.formData.size = this.originSize;
      this.formData.updateTime = dayjs().format('YYYY-MM-DD')
      this.doSearch();
    },
    handleUpload() {
      this.$refs.fileInput.click(); // 触发文件选择
    },
    readExcel(event) {
      this.isUploading = true;
      const fileList = event.target.files;
      this.excelName = fileList[0].name
      const excelFile = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', excelFile)
      Api.uploadSheetFile(formData).then(res => {
        this.doSearch()
      }).finally(_ => {
        this.isUploading = false;
      })
      // 手动清空数据
      this.$refs.fileInput.value = null;
    },
    changeType(v) {
      this.doSearch();
    },
    // 搜索热源
    doSearchSource() {
      this.doSearch()
    },
    // 搜索热源
    doSearchArea() {
      this.doSearch();
    },
    // 确认删除掉
    confirmDelete(v) {
      if (!v) {
        return
      }
      if (!v.id) {
        return;
      }
      Api.deleteSingleComplainInfo({
        id: v.id
      }).then(res => {
        this.$message({
          message: res.msg,
        })
        this.reset();
      })
      this.dialogVisible = false;
      this.currentRow = null;
    },
    // 查看详情
    checkDetailData() {
    },
    // 当前页码改变
    currentChange(v) {
      this.formData.page = v;
      this.doSearch();
    },
    //  导出
    handleDwonload() {
      this.isExporting = true;
      const stamp = this.formData.handleUpdateTime || dayjs().format('YYYY-MM-DD')
      Api.exportSingleWORDfile({
        // 当日时间
        time: stamp,
      }).then(res => {
        this.isExporting = false;
        const blob = new Blob([res], {
          type: res.type
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = stamp + '.doc';
        link.style.display = 'none';
        document.body.appendChild(link)
        link.click();
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      }).finally(_ => {
        this.isExporting = false;
      })
    },
    handleSelectionChange(v) {
      if (!v.length) {
        this.selectionArr = []
      } else {
        this.selectionArr = v.map(v_ => v_.id)
      }

    },
    confirmDeleteMuti() {
      if (!this.selectionArr.length) { return }
      Api.deleteMutiComplainInfo(this.selectionArr).then(res => {
        this.$message({
          message: res.msg,
        })
        this.reset();
      }).finally(_ => {
        this.dialogVisibleMuti = false;
      })
    },
    // 还原所有的设置
    doResetAll() { },
    // 添加新的设置
    doAddNewSingleSetting() { }
  },
};
</script>

<template>
  <!-- layout 外包层 -->
  <div class="manager full-height">
    <div class="titles-area">
      <div class="main-title font-alimamashuheiti">
        阈值设定
      </div>
      <div class="sub-title font-AlibabaPuhui">
        管理供热系统各项监测指标的阈值设置
      </div>
    </div>
    <div class="search-area">
      <el-row :gutter="10" justify="end">
        <!-- <el-col :span="3">
          <el-input placeholder="请输入公司名称" v-model="formData.ssgs" @keyup.enter="doSearchSource()"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input placeholder="请输入小区名称" v-model="formData.ssxq" @keyup.enter="doSearchArea()"></el-input>
        </el-col>
        <el-col :span="2">
          <el-select placeholder="请选择投诉类型" v-model="formData.wtfl" clearable @change="changeType">
            <el-option value="供暖不热" label="供暖不热"></el-option>
            <el-option value="申请供热服务" label="申请供热服务"></el-option>
            <el-option value="收费退费欠费赔偿等问题" label="收费退费欠费赔偿等问题"></el-option>
            <el-option value="供热设施维修" label="供热设施维修"></el-option>
            <el-option value="非市政集中供热问题" label="非市政集中供热问题"></el-option>
            <el-option value="其它问题" label="其它问题"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-date-picker
              style="width: 100%"
              v-model="formData.updateTime"
              type="date"
              placeholder="请选择更新时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-col> -->
        <el-col :span="12">
          <!-- <el-button type="primary" @click="() => {
            doSearch()
          }">查询</el-button>
          <el-button type="info" @click="() => {
            reset()
          }">重置</el-button> -->
          <!-- <el-popover
            placement="bottom"
            trigger="click"
            title="请先选择生成报告的时间"
            width="300"
          >
            <div class="date-picker-wrapper">
              <el-date-picker
                  style="width: 100%"
                  v-model="formData.handleUpdateTime"
                  type="date"
                  :teleported="false"
                  placeholder="请选择更新时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              >
              </el-date-picker>

              <div style="text-align: right;margin-top: 1rem;">
                <el-button type="primary" @click="handleDwonload" size="small">确认</el-button>
              </div>
            </div>
            <template #reference>
              <el-button
                  type="primary"
                  plain
                  :disabled="isExporting"
                  v-loading="isExporting"
                  :element-loading-svg="loadingSVG"
                  element-loading-svg-view-box="0,0,50,50"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
              >
                <el-icon class="el-icon--right" style="margin-right: 5px">
                  <Document />
                </el-icon>生成报告
              </el-button>
            </template>
</el-popover> -->
          <el-button type="primary" @click="doAddNewSingleSetting" :disabled="isUploading" v-loading="isUploading"
            :element-loading-svg="loadingSVG" element-loading-svg-view-box="0,0,50,50"
            element-loading-background="rgba(0, 0, 0, 0.2)">
            <el-icon class="el-icon--right" style="margin-right: 5px">
              <Plus />
            </el-icon>新增设置
          </el-button>
          <el-button type="danger" plain @click="() => { dialogVisibleMuti = true; }"
            :disabled="selectionArr.length < 2">
            <el-icon class="el-icon--right" style="margin-right: 5px">
              <Delete />
            </el-icon>
            删除设置
            <span v-if="selectionArr.length >= 2">
              ({{ selectionArr.length }})
            </span>
          </el-button>
          <el-button type="info" link @click="() => { dialogVisibleResetSetting = true; }">
            <el-icon class="el-icon--right" style="margin-right: 5px">
              <Refresh />
            </el-icon>
            还原系统设置
            <span v-if="selectionArr.length >= 2">
              ({{ selectionArr.length }})
            </span>
          </el-button>
          <input type="file" accept=".xlsx, .xls" ref="fileInput" @change="readExcel" style="display:none;" />
        </el-col>
      </el-row>
    </div>
    <div class="list-area">
      <el-table :data="tableData" :style="mainStyle" border stripe @selection-change="handleSelectionChange"
        row-key="id" empty-text="暂无数据" :default-sort="{ prop: 'ssgs', order: 'descending' }">
        <el-table-column header-align="center" align="center" type="selection" width="60" />
        <el-table-column header-align="center" type="index" label="序号" align="center" width="70" />
        <el-table-column header-align="center" prop="sceneName" label="场景" min-width="100" sortable />
        <el-table-column header-align="center" align="center" prop="featureFac" label="要素设施" width="120" sortable />
        <el-table-column header-align="center" prop="indicator" label="指标" width="120" sortable />
        <el-table-column header-align="center" prop="settingContent" label="设置内容" width="300">
          <template #default="scope">
            <el-descriptions class="margin-top" title="" label-width="120" :column="1" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    最小值（℃）
                  </div>
                </template>
                {{ scope.row.minTem }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    最大值（℃）
                  </div>
                </template>
                {{ scope.row.maxTem }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column header-align="center" prop="warningInfo" label="告警信息" sortable />
        <el-table-column header-align="center" prop="remarks" label="备注说明" sortable />
        <el-table-column header-align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link type="primary" size="small"
              @click="(e) => { currentRow = scope.row; dialogVisibleDetail = true; }">
              修改
            </el-button>
            <el-button link type="danger" size="small"
              @click="(e) => { currentRow = scope.row; dialogVisible = true; }">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-area">
        <el-pagination background :page-size="formData.size" @current-change="currentChange" layout="prev, pager, next"
          :total="totalDataLength" />
      </div>
      <el-dialog v-model="dialogVisible" title="删除" width="300">
        <p class="" style="font-size: 16px;">请确认是否删除</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false; currentRow = null;">取消</el-button>
            <el-button size="small" type="danger" @click="confirmDelete(currentRow)">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleResetSetting" title="还原系统设置" width="300">
        <p class="" style="font-size: 16px;">请确认是否还原所有的设置</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisibleResetSetting = false;">取消</el-button>
            <el-button size="small" type="danger" @click="doResetAll()">
              还原
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleMuti" title="批量删除" width="300">
        <p class="" style="font-size: 16px;">请确认是否批量删除选中的 {{ selectionArr.length }} 项记录</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="dialogVisibleMuti = false;">取消</el-button>
            <el-button size="small" type="danger" @click="confirmDeleteMuti()">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleDetail" width="800" title="阈值设定">
        <div v-if="currentRow">
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="场景" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择当前场景" style="width: 90%">
                    <el-option key="1" :label="'热源监测'" :value="1" />
                    <el-option key="2" :label="'换热站监测'" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="要素设施" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择要素设施" style="width: 90%">
                    <el-option key="1" :label="'设备监测'" :value="1" />
                    <el-option key="2" :label="'温度压力'" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="指标" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择要素设施" style="width: 90%">
                    <el-option key="1" :label="'设备监测'" :value="1" />
                    <el-option key="2" :label="'温度压力'" :value="2" />
                    <el-option key="2" :label="'温度压力'" :value="3" />
                    <el-option key="2" :label="'温度压力'" :value="4" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="单位" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择要素设施" style="width: 90%">
                    <el-option key="1" :label="'设备监测'" :value="1" />
                    <el-option key="2" :label="'温度压力'" :value="2" />
                    <el-option key="2" :label="'温度压力'" :value="3" />
                    <el-option key="2" :label="'温度压力'" :value="4" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <el-form-item label="单位" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择要素设施" style="width: 90%">
                    <el-option key="1" :label="'设备监测'" :value="1" />
                    <el-option key="2" :label="'温度压力'" :value="2" />
                    <el-option key="2" :label="'温度压力'" :value="3" />
                    <el-option key="2" :label="'温度压力'" :value="4" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <el-form-item label="单位" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择要素设施" style="width: 90%">
                    <el-option key="1" :label="'设备监测'" :value="1" />
                    <el-option key="2" :label="'温度压力'" :value="2" />
                    <el-option key="2" :label="'温度压力'" :value="3" />
                    <el-option key="2" :label="'温度压力'" :value="4" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <el-form-item label="单位" label-position="top">
                  <el-select v-model="currentRow.name" placeholder="选择要素设施" style="width: 90%">
                    <el-option key="1" :label="'设备监测'" :value="1" />
                    <el-option key="2" :label="'温度压力'" :value="2" />
                    <el-option key="2" :label="'温度压力'" :value="3" />
                    <el-option key="2" :label="'温度压力'" :value="4" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div class="grid-content">
                
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div class="grid-content">
                
              </div>
            </el-col>
          </el-row>
        </div>
        <template #footer>
        </template>
      </el-dialog>
    </div>

  </div>
</template>
<style></style>
<style lang="less">
.manager {

  &>.list-area {
    height: calc(100% - 50px);

    &>.page-area {
      height: 50px;
    }
  }
}

.search-area {
  margin-bottom: 1rem;
}

.page-area {
  padding-right: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
}

.titles-area {
  &>.main-title {
    font-size: 2rem;
    line-height: 2;
  }

  &>.sub-title {
    font-size: 1.4rem;
    color: #9e9e9e;
    line-height: 2;
  }
}
</style>
